// 定义常用 Less 变量，便于统一管理和修改
@primary-color: #007bff; // 主题蓝色
@bubble-my-bg: #dcf8c6; // 我的消息气泡背景色
@bubble-other-bg: #fff; // 对方消息气泡背景色
@page-bg-color: #f7f8fa; // 页面背景色，Vant 默认
@border-color-light: #ebedf0; // 边框浅色
@text-color-light: #909399; // 浅色文字
@text-color-dark: #303133; // 深色文字
@text-color-primary: #303133; // Vant 默认主要文字颜色

// 针对系统消息（如请求卡片）的通用包裹容器
.system-message-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10rpx;
  align-items: center;
}

// 联系方式请求卡片的样式
.contact-request-card {
  font-size: 26rpx;
  color: #303133;
  text-align: center;

  .request-text {
    margin-bottom: 20rpx;
    line-height: 1.5;
    text-align: left;
  }

  .request-actions {
    display: flex;
    gap: 20rpx;
    justify-content: center;

    // Vant Button 的自定义类
    .request-btn {
      padding: 0 30rpx !important;
      height: 56rpx !important;
      line-height: 56rpx !important;
    }
  }

  .request-status {
    color: #999;
    font-size: 24rpx;
  }
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: @page-bg-color;
  box-sizing: border-box; // 确保高度计算包含 padding/border
}

/* 顶部联系信息面板 */
.contact-info-panel {
  width: 100%; // 占满宽度
  background-color: #fff;
  padding: 20rpx 30rpx; // 上下20，左右30
  border-bottom: 1rpx solid @border-color-light;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); // 添加一点阴影，增强层次感
  flex-shrink: 0; // 确保顶部面板不被压缩
}

.contact-info-panel .contact-info-item {
  display: flex;
  align-items: center;
  padding: 10rpx 0; // 条目内间距
  font-size: 28rpx;
  color: @text-color-dark;
}

.contact-info-panel .contact-info-item .van-icon {
  margin-right: 15rpx; // 图标和文字间距
  color: @text-color-light; // 图标颜色
}

.contact-info-panel .contact-info-item .label {
  color: @text-color-light; // 标签文字颜色
  flex-shrink: 0; // 防止压缩
  font-size: 24rpx;
}

.contact-info-panel .contact-info-item .value {
  flex: 1; // 填充剩余空间 
  color: @text-color-dark;
  word-break: break-all; // 文本过长自动换行
  font-size: 24rpx;
}

.contact-info-panel .contact-info-item .van-button {
  margin-left: 20rpx; // 按钮与文字间距
}




.messages-container {
  flex: 1; // 恢复 flex:1，使其占据剩余空间
  overflow-y: auto; // 消息列表可滚动
  padding-top: 20rpx; // 顶部留出一些空间，让消息不顶到导航栏
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  padding-bottom: 10rpx;
  // 不再需要 padding-bottom 动态设置
}

.message-item {
  display: flex;
  align-items: flex-end; // 消息气泡底部对齐，更常见
  margin-bottom: 20rpx; // 消息间距
  // padding: 0 20rpx; // 消息气泡的左右内边距，这个移到 messages-container 的 padding-left/right 统一设置，也可以保留

  .avatar {
    width: 80rpx; // 统一为 rpx
    height: 80rpx; // 统一为 rpx
    border-radius: 50%;
    flex-shrink: 0; // 防止头像被压缩
  }

  .message-bubble {
    max-width: 65%; // 适当调整最大宽度
    padding: 16rpx 24rpx;
    border-radius: 20rpx;
    word-break: break-word; // 文本自动换行
    font-size: 30rpx;
    line-height: 1.5;
    position: relative; // 为消息状态图标定位
    min-height: 40rpx; // 保持气泡最小高度，避免太短

    .message-text {
      color: @text-color-dark;
    }

    .message-image {
      max-width: 100%;
      height: auto;
      border-radius: 8rpx; // 统一为 rpx
      vertical-align: middle;
      display: block; // 避免图片底部空白
    }

    .revoked-text {
      color: @text-color-light;
      font-style: italic;
      font-size: 26rpx; // 统一为 rpx
    }
  }

  // 消息发送状态图标，定位在气泡内部右下角/左下角
  .message-status {
    position: absolute;
    bottom: 8rpx; // 距离气泡底部的距离
    font-size: 24rpx; // 图标大小
    color: @text-color-light;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 我的消息样式
  &.my-message {
    justify-content: flex-end; // 自己的消息靠右
    margin-left: 120rpx; // 增加左外边距，使我的消息不那么靠右

    .avatar {
      order: 2; // 正确：将头像放在消息气泡（默认 order: 0）之后
      margin-left: 20rpx; // 统一为 rpx
    }

    .message-bubble {
      background-color: @bubble-my-bg; // 浅绿色背景
      color: @text-color-dark;
      border-bottom-right-radius: 0; // 右下角没有圆角，形成尖角
      padding-right: 36rpx; // 为状态图标留出空间，右侧留多一点
      border-bottom-left-radius: 20rpx; // 我的消息气泡左下角也应该是圆角

      .message-status {
        left: auto;
        right: 12rpx; // 状态图标在气泡内右侧，靠近边缘
      }
    }
  }

  // 对方消息样式
  &.other-message {
    justify-content: flex-start; // 对方消息靠左
    margin-right: 120rpx; // 增加右外边距，与我的消息保持对称

    .avatar {
      margin-right: 20rpx; // 统一为 rpx
    }

    .message-bubble {
      background-color: @bubble-other-bg; // 白色背景
      color: @text-color-dark;
      border-bottom-left-radius: 0; // 左下角没有圆角，形成尖角
      padding-left: 36rpx; // 为状态图标留出空间，左侧留多一点
      border-bottom-right-radius: 20rpx; // 对方消息气泡右下角也应该是圆角

      .message-status {
        left: 12rpx; // 状态图标在气泡内左侧，靠近边缘
        right: auto;
      }
    }
  }
}

.input-area-wrapper {
  background-color: @page-bg-color;
  transition: bottom 0.3s ease; // 平滑过渡动画，用于键盘弹起
  box-sizing: border-box; // 确保高度计算正确
  padding-bottom: constant(safe-area-inset-bottom); // 适配 iPhone X 底部安全区
  padding-bottom: env(safe-area-inset-bottom); // 适配 iPhone X 底部安全区
  // 移除 flex-shrink: 0;
}

.input-area {
  padding: 20rpx; // 统一为 rpx
  border-top: 1rpx solid @border-color-light; // 统一为 rpx
  display: flex;
  align-items: flex-end; // 输入框和按钮底部对齐

  .action-icon {
    margin-right: 20rpx; // 统一为 rpx
    font-size: 48rpx; // 统一为 rpx
    padding-bottom: 16rpx; // 使图标与输入框底部对齐，统一为 rpx
    color: @text-color-light;
  }

  // 为原生 textarea 定义样式
  .message-input {
    flex: 1;
    margin-right: 20rpx; // 统一为 rpx
    background-color: @bubble-other-bg;
    border-radius: 20rpx; // 统一为 rpx
    min-height: 80rpx; // 保持输入框最小高度，统一为 rpx
    padding: 24rpx; // 统一为 rpx
    line-height: 1.5; // 确保行高一致
    box-sizing: border-box; // 确保高度计算包含 padding
    font-size: 30rpx; // 统一字体大小
    color: @text-color-dark; // 确保文字颜色
  }

  .send-button {
    height: 80rpx; // 统一为 rpx
    min-width: 120rpx; // 统一为 rpx
    padding: 0 30rpx; // 统一为 rpx
    font-size: 30rpx; // 统一字体大小
  }
}

.greeting-tip {
  height: 100rpx;
  width: 100rpx;
  right: 60rpx;
  opacity: .5;
  bottom: 100rpx;
  position: absolute;
}

.block-tip {
  padding: 20rpx; // 统一为 rpx
  text-align: center;
  font-size: 28rpx; // 统一为 rpx
  color: @text-color-light;
  background-color: #f0f0f0; // 提示背景色
  border-top: 1rpx solid @border-color-light; // 统一为 rpx
}

.pull-down-loading {
  text-align: center;
  padding: 20rpx 0; // 统一为 rpx
  color: @text-color-light;
  font-size: 28rpx; // 统一为 rpx
}